<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/2/6
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户构成分析</title>
    <jsp:include page="../common/css_js.jsp"/>
</head>
<body>
<div class="container-fluid  p-t-15">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">客户构成分析-柱状图</div>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">客户构成分析-折线图</div>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-lines"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctx}/static/js/main.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/Chart.min.js"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        var cKey = [];
        var cValue = [];
        $.get("${ctx}/customer/component", "", function (data) {
            $(data).each(function (i, o) {
                cKey.push(o.name);
                cValue.push(o.value);
            });

            var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
                $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

            var $dashChartBarsData = {
                labels: cKey,
                datasets: [
                    {
                        label: '客户数量',
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(51, 202, 185, 0.5)',
                        hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                        data: cValue
                    }
                ]
            };

            var $dashChartLinesData = {
                labels: cKey,
                datasets: [
                    {
                        label: '客户数量',
                        data: cValue,
                        borderColor: '#358ed7',
                        backgroundColor: 'rgba(53, 142, 215, 0.175)',
                        borderWidth: 1,
                        fill: false,
                        lineTension: 0.5
                    }
                ]
            };

            new Chart($dashChartBarsCnt, {
                type: 'bar',
                data: $dashChartBarsData
            });

            new Chart($dashChartLinesCnt, {
                type: 'line',
                data: $dashChartLinesData,
            });
        });
    });
</script>
</body>
</html>
